<template>
  <view class="balance-page">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
      <div class="block-top">
		  <div class="top-num">
			  <div class="num-div">
				  <div class="num">{{info.commissionTotal}}</div>
				  <div class="text">佣金总额</div>
			  </div>
			  <div class="num-line"></div>
			  <div class="num-div">
				  <div class="num">{{info.balance}}</div>
				  <div class="text">可提现余额</div>
			  </div>
		  </div>
		  <div class="top-ps">注：满{{info.canCashOutAmount}}元可提现</div>
	      <div class="top-btn"><!---->
			  <u-button text="提现"  shape="circle" @click="withdrawal" color="linear-gradient(90deg, #FFBA27 0%, #FF921D 100%)" :disabled="info.balance < info.canCashOutAmount"></u-button>
			  <u-button text="收款账户"  shape="circle" @click="onJump('/pagesShare/index/account')" :plain="true" type="warning" :customStyle="{'margin-top':'22rpx','color':'#FF921D'}"></u-button>
		  </div>
	  </div>
	  <div class="block-bottom">
		  <div class="bottom-title">
			  提现记录
		  </div>
		  <div class="bottom-list">
			  <div class="item-div" v-for="item in list">
				  <div class="item-top">
					  <div class="top-left">{{item.title}}</div>
					  <div class="top-right">{{item.amount}}</div>
				  </div>
			      <div class="item-bottom">
					  <div class="bottom-left">{{item.createdAt}}</div>
					  <div class="bottom-right">{{item.applyState}}</div>
				  </div>
			  </div>
		  </div>
		  <div style="padding:40rpx 0 0 0;">
			  <u-loadmore :status="status"></u-loadmore>
		  </div>
	  </div>
	  
	  <u-popup :show="show" :round="10" mode="center" @close="show=false" :closeable="true">
		  <div style="padding:0 32rpx 32rpx 32rpx;width:80vw">
			  <div style="font-size:28rpx;text-align: center;height:88rpx;line-height: 88rpx;">提现</div>
			  <u-form labelPosition="left" ref="form" labelWidth="120" errorType="toast" >
				  <u-form-item  label="提现金额" pro='num' borderBottom>
						<div style="text-align: right;">{{info.balance}}</div>
			      </u-form-item>
				  <u-form-item label="提现方式"  borderBottom >
						<div v-if="info.canWechatPay == 1" style="text-align: right;">微信</div>
						<div v-else-if="info.canBankPay == 1" style="text-align: right;">银行汇款</div>
				  </u-form-item>
			  </u-form>
			  <u-button text="确认提现"  :loading="btnLoading" shape="circle" type="warning"  @click="saveForm" :customStyle="{marginTop:'40rpx'}"></u-button>
		  </div> 
	  </u-popup>
  </view>
</template>

<script>

  import { balanceInfo,cashOutList,cashOut} from '@/config/api.js'
  import store from '@/store';
  export default {
    data() {
      return {
        info:{},
		show:false,
		btnLoading:false,
		status: 'loadmore',
		list: [],
		pageNum: 0,
		pageSize:10,
		count:0,
      }
    },
	onShow() {
		this.getNum()
	 
	},
    onLoad() {
		this.clearData()
		this.getList()
	 
    },
     onReachBottom() {
		if(this.list.length >= this.count) {
			this.status = 'nomore';
			return ;
		}
		this.pageNum = ++ this.pageNum;
		this.getList()
	},

    methods: {
		onJump(url) {
		  uni.navigateTo({
		    url: url
		  })
		},
		//清除数据
		clearData(){
			this.pageNum = 1;
			this.list = [];
			this.status = 'loadmore';
			this.count = 0
		},
		getList(){
			let data = {};
			data.pageSize = 10;
			data.pageNum = this.pageNum;
			this.status = 'loading';
			cashOutList(data).then((res)=>{
				this.list = this.list.concat(res.list ? res.list : [] );
				this.count = res.count;
				if(this.list.length >= this.count) {
					this.status = 'nomore';
				}else{
					this.status = 'loadmore';
				}
			}).catch(()=>{
				this.status = 'loadmore';
			})
		},
		saveForm(){
		   this.btnLoading = true;
			 cashOut().then(()=>{
				   this.btnLoading = false;
				   uni.showToast({
					 title: '提交成功！',
					 icon: 'none',
					 duration: 2000,
				   });
				   this.getNum();
				   this.clearData()
				   this.getList();
				   this.show = false;
			 }).catch(()=>{
				   this.btnLoading = false;
			 })
	   
		},
		getNum(){
			balanceInfo().then((res)=>{
				this.info = res;
			})
		},
		withdrawal(){
			if(this.info.canWechatPay == 0 && this.info.canBankPay == 0){
				uni.showModal({
					content: '检测到您没有设置收款账户，是否去设置？',
					confirmText: "去设置",
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
							  url: '/pagesShare/index/account'
							})
							
						} else {
							return false;
						}
					}
				})
			}else{
				this.show = true;
			}
		},
		
    }
  }
</script>

<style lang="scss">
 
  @import '@/style/common.scss';
  .balance-page{
	  padding:24rpx;
	  .block-top{
		  background: rgba(255,255,255,1);
		  border-radius: 18rpx;
		  padding:32rpx;
		  position: relative;
		  .top-num{
			  margin-top:60rpx;
			  @include flexbox(center,center);
			  .num-div{
				  width:49%;
				  text-align: center;
				  .num{
					  font-size: 50rpx;
					  line-height: 70rpx;
					  color: #000000;
				  }
				  .text{
					  margin-top:10rpx;
					  font-size: 20rpx;
					  line-height: 30rpx;
					  color: #747474;
				  }
			  }
			  .num-line{
				  width: 1px;
				  height: 120rpx;
				  background: #FFEBD1;
			  }
		  }
		  .top-ps{
			position: absolute;
			right:0;
			top:32rpx;
			height: 40rpx;
			background: rgba(255,242,223,1);
			border-radius: 12rpx 0px 0px 12rpx;
			padding:0 20rpx;
			font-size: 22rpx;
			line-height: 40rpx;
			color: #FF921D;
		  }
		  .top-btn{
			  margin-top:44rpx
		  }
	  }
	  .block-bottom{
	     margin-top:30rpx;
		 background: rgba(255,255,255,1);
		 border-radius: 18rpx;
		 padding:32rpx; 
		 .bottom-title{
			 font-size: 36rpx;
			 font-weight: bold;
			 line-height: 50rpx;
			 color: #070D14;
			 position: relative;
			 padding-left:30rpx;
		 }
		 .bottom-title::after{
			 content: " ";
			 position: absolute;
			 width: 8rpx;
			 height: 38rpx;
			 background: linear-gradient(90deg, #FFBF63 0%, #FC9500 100%);
			 border-radius: 4rpx;
			 left:0;
			 top:8rpx;
		 }
		 .bottom-list{
			 border-top: 1px solid #eFeFeF;
			 margin-top:32rpx;
			 .item-div{
				 padding:24rpx 0;
				 border-bottom:1px solid #eFeFeF;
				 .item-top{
					  @include flexbox(space-between,center);
					  font-size: 28rpx;
					  line-height: 38rpx;
					  color: #070D14;
				 }
				 .item-bottom{
					  @include flexbox(space-between,center);
					  font-size: 20rpx;
					  line-height: 30rpx;
					  color: #929292;
				 }
			 }
		 }
	  }
  }
  
</style>